<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		.box{
			width: 275px;
			height: 465px;
			border: 1px solid #EEEEEE;
			margin: 50px auto;
		}
		h1{
			height: 41px;
			width: 100px;
			line-height: 41px;
			font-size: 16px;
			border-top:3px solid #3492D1;
			border-bottom:1px solid #EEEEEE;
			margin-left: 10px;
		}
		.ji{
			background: #F0F2F3 url() 0 0 no-repeat;
		}
		.content{
			width: 100%;
			height: 420px;
			border: 1px solid blue;
			overflow: hidden;
		}
		.list{
			width: 100%;
			position: relative;
			top: 0px;
			border: 1px solid red;
			/*overflow: hidden;*/
		}
		li{
			width: 265px
			height: 70px;
			line-height: 70px;
			background: #fff url() 0 0 no-repeat;
			padding-left: 10px;
		}
	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function  (argument) {
			
			function run () {
				$('.list').animate({top: '-70px'}, 1000,function  () {

					$('.list').css('top', '0px');
					
					$('.list').append($('li').first());

				});
			}

			time = setInterval(run, 3000);

		})
	</script>

</head>
<body>
	<div class="box">
		<h1>领号实时播报</h1>
		<div class="content">
			<ul class="list">
				<li class="ji">内容1</li>
				<li>内容2</li>
				<li class="ji">内容3</li>
				<li>内容4</li>
				<li class="ji">内容5</li>
				<li>内容6</li>
				<li class="ji">内容7</li>
				<li>内容8</li>
			</ul>
		</div>
	</div>
</body>
</html>